<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/common/tagPage.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>订单详情页</title>
    <meta name="keywords" content="中文"/>
    <meta name="description" content="下载"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- basic styles -->
    <link href="${baseurl}statics/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/font-awesome.min.css"/>

    <!--[if IE 7]>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <!-- fonts -->

    <link rel="stylesheet" href="${baseurl}statics/assets/css/fonts.css"/>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/translateelement.css"/>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/styleCss.css"/>

    <!-- ace styles -->

    <link rel="stylesheet" href="${baseurl}statics/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/ace-skins.min.css"/>

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="${baseurl}statics/assets/css/ace-ie.min.css"/>
    <![endif]-->

    <link rel="stylesheet" href="${baseurl}statics/assets/css/font-awesome.css">

    <!-- inline styles related to this page -->
    <!-- 公共的js -->
    <script src="${baseurl}statics/assets/js/common.js"></script>
    <!-- ace settings handler -->

    <script src="${baseurl}statics/assets/js/ace-extra.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="${baseurl}statics/assets/js/html5shiv.js"></script>
    <script src="${baseurl}statics/assets/js/respond.min.js"></script>
    <![endif]-->
    <!--日期插件-->
    <link rel="stylesheet" href="${baseurl}statics/assets/css/foundation-datepicker.css"/>

    <script type="text/javascript" src="${baseurl}statics/assets/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="${baseurl}statics/assets/js/My97DatePicker/WdatePicker.js"></script>


</head>

<body>

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        function validate() {

           var model = $("#model option:selected").val();
            if(model=='0'){
                modelTip.innerHTML='请选择中底型号';
                return false;
            }else{
                modelTip.innerHTML='';
            }



            var tradeName = $("#tradeName").val();
            if(!tradeName){
                tradeNameTip.innerHTML='请填写中底品名';
                return false;
            }else{
                tradeNameTip.innerHTML='';
            }

           var userId = $("#userId option:selected").val();
            if(userId=='0'){
                userIdTip.innerHTML='请选择用户';
                return false;
            }else{
                userIdTip.innerHTML='';
            }



            var  workmanship=$("#workmanship").val();
            if(!workmanship){
                workmanshipTip.innerHTML='请填写制作工艺';
                return false;
            }else{
                workmanshipTip.innerHTML='';
            }



            var  foreignModel=$("#foreignModel").val();
            if(!foreignModel){
                foreignModelTip.innerHTML='请填对应型号';
                return false;
            }else{
                foreignModelTip.innerHTML='';
            }

                var unitPrice = $("#unitPrice").val();
                if (unitPrice == '') {
                    unitPriceTip.innerHTML = '单价不能为空';
                    return false;
                } else {
                    unitPriceTip.innerHTML = '';
                }

                 var actStarttime=$("#actStarttime").val();
                 if (actStarttime=='0') {
                 actStarttimeTip.innerHTML='请选择交货日期';
                 return false;
                 }else{
                 actStarttimeTip.innerHTML='';
                 }

                var totalPrice = $("#totalPrice").text();
                $("#contractPrice").val(totalPrice);
            return true;

        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">订单管理</a>
        </li>
        <li>
            <a href="${baseurl}order/findAllOrder?roleId=1&adminId=1">订单列表</a>
        </li>
        <li class="active">添加订单</li>
    </ul>
</div>


<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" role="form" method="post" action="${baseurl}order/insert" >
              <%--onsubmit="return submit()">--%>
            <input type="hidden" name="contractPrice" id="contractPrice">
                  <input name="adminId" type="hidden" value="${sysUserManage.id}">
                  <input name="roleId" type="hidden" value="${sysUserManage.roleId}">
        <div class="order-form-rbox zhongdi_box">
            <ul>
                <li>
                    <span>中底型号<i>*</i></span>
                    <div class="zhongdi_type">
                        <select name="model" id="model">
                            <option value="0">--请选择中底型号--</option>
                            <c:forEach items="${insoleList}" var="insoleList">
                                <option value="${insoleList.model}">${insoleList.model}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="warning_tip">
                        <span class="tips" id="modelTip"></span>
                    </div>
                </li>
                <li>
                    <span>中底品名</span><input id="tradeName" name="tradeName" type="text" onfocus="this.style.color = '#333';this.style.border='1px solid #019740';" onblur="if(this.value==''){this.style.color = '#ccc';}this.style.border='1px solid #ccc';" />
                    <span class="tips" id="tradeNameTip"></span>
                </li>

                <li>
                    <span>用户姓名<i>*</i></span>
                    <div class="zhongdi_type">
                        <select name="userId" id="userId">
                            <option value="0">--请选择用户--</option>
                            <c:forEach items="${userList}" var="userList">
                                <option value="${userList.id}">${userList.userName}</option>
                            </c:forEach>
                        </select>

                    </div>
                    <div class="warning_tip">
                        <span class="tips" id="userIdTip"></span>
                    </div>
                </li>
                <li>
                    <span>制作工艺</span><input id="workmanship" name="workmanship" type="text" onfocus="this.style.color = '#333';this.style.border='1px solid #019740';" onblur="if(this.value==''){this.style.color = '#ccc';}this.style.border='1px solid #ccc';" />
                    <span class="tips" id="workmanshipTip"></span>
                </li>
                <li>
                    <span>对外型号</span><input id="foreignModel" name="foreignModel" type="text" onfocus="this.style.color = '#333';this.style.border='1px solid #019740';" onblur="if(this.value==''){this.style.color = '#ccc';}this.style.border='1px solid #ccc';" />
                    <span class="tips" id="foreignModelTip"></span>
                </li>
                <li class="danxuan_radio">
                    <span>鞋码类型<i>*</i></span>
                    <ul>
                        <li><input type="radio" name="sizeType" id="omtype" value="1"/><label for="omtype"><img src="${baseurl}statics/assets/images/check01.png" alt="" />标准码</label></li>
                        <li><input type="radio" name="sizeType" id="bztype" value="2" checked/><label for="bztype"><img src="${baseurl}statics/assets/images/check.png" alt="" />欧码</label></li>
                        <li><input type="radio" name="sizeType" id="mmtype" value="3"/><label for="mmtype"><img src="${baseurl}statics/assets/images/check01.png" alt="" />美码</label></li>
                    </ul>

                    <div class="warning_tip">
                        <span class="tips" id="sizeTypeTip"></span>
                    </div>
                </li>
                <li  class="zddj_top">
                    <span>数量<i>*</i><br/>(单位：双)</span>
                    <div class="zd_numtablebox">
                        <div class="zd_numtable" id="sizeTable">
                            <!--欧码-->
                            <table >
                                <tr>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="34#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="35#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="36#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="37#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="38#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="39#"></td>
                                    <td><input type="text" readonly="readonly" name="size" style="width: 50px" value="40#"></td>
                                    <td>合计</td>
                                </tr>
                                <tr>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td><input type="text" class="number" name="number" style="width: 50px"></td>
                                    <td id="sum"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="warning_tip">
                        <span class="tips" id="numberTip"></span>
                    </div>
                </li>
                <li class="zddj_top">
                    <span>单价<i>*</i><br/>(单位：双)</span><input id="unitPrice" name="unitPrice" type="text" onfocus="this.style.color = '#333';this.style.border='1px solid #019740';" onblur="if(this.value==''){this.style.color = '#ccc';}this.style.border='1px solid #ccc';" />
                    <span class="tips" id="unitPriceTip"></span>
                    <p>订单合同总价：<span id="totalPrice">0</span>元</p>
                </li>
                <li>
                    <span>交货日期</span>
                    <input type="text"  class="Wdate" id="actStarttime" value="" name="deliveryTime" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
                    <span class="tips" id="actStarttimeTip"></span>
                </li>
            </ul>
            <div class="space-4"></div>
            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <input class="btn btn-info" type="submit" onclick="return validate();">
                    </input>
                    &nbsp; &nbsp; &nbsp;
                    <button class="btn" type="reset">
                        <i class="icon-undo bigger-110"></i>
                        重置
                    </button>
                </div>
            </div>
        </div>
        </form>
    </div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->


<script src="${baseurl}statics/assets/js/foundation-datepicker.zh-CN.js"></script>
<script src="${baseurl}statics/assets/js/foundation-datepicker.js"></script>

<script>

</script>


<script type="text/javascript">
    window.jQuery || document.write("<script src='${baseurl}statics/assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='${baseurl}statics/assets/js/jquery-1.10.2.min.js'>" + "<" + "/script>");
</script>
<![endif]-->

<script type="text/javascript">
    if ("ontouchend" in document) document.write("<script src='${baseurl}statics/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="${baseurl}statics/assets/js/bootstrap.min.js"></script>
<script src="${baseurl}statics/assets/js/typeahead-bs2.min.js"></script>


<script src="${baseurl}statics/assets/js/ace-elements.min.js"></script>
<script src="${baseurl}statics/assets/js/ace.min.js"></script>

<!-- inline scripts related to this page -->

<script type="text/javascript">

    $("#model").change(function () {
        $("#totalPrice").text(0);
        $("#unitPrice").val('');
        var model = $(this).eq(0).val();
        var shoesType=$('input:radio[name="sizeType"]:checked').val();
        if(shoesType==null){
            shoesType = 1;
        }
        $.ajax({
            url: "${baseurl}shoesSize/findShoesSize",
            data:{"shoesType":shoesType,"model":model},
            type: "post",
            success: function (json) {
                var td1 ='';
                var td2 ='';
                for(var i=0;i<json.length;i++){
                    td1 += '<td><input type="text" readonly="readonly" name="size" style="width: 50px" value="'+json[i]+'"></td>';
                    td2 += '<td><input type="text" class="number" name="number" style="width: 44px"></td>';
                }
                var table = '<table><tr>'+td1+'<td style="width:44px">合计</td></tr><tr>'+td2+'<td id="sum"></td></tr></table><span class="tips" id="numberTip"></span>';
                $("#sizeTable").html("");
                $("#sizeTable").html(table);
            },
            error: function (json) {
                alert("error");
            }
        });
    })

//    $(".number").on('input',function(e){
    $("body").on('input',".number",function(e){
        var sum = 0;
        for(var i=0;i<$(".number").length;i++){
            var total = 0;
            if($(".number").eq(i).val()=="" || $(".number").eq(i).val()==null){
                sum = sum + total;
            }else{
                sum = sum + parseInt($(".number").eq(i).val());
            }
        }
        $("#sum").text(sum);
    });

    $(".number").on('input',function(e){
        var sum = 0;
        for(var i=0;i<$(".numbers").length;i++){
            var total = 0;
            if($(".number").eq(i).val()=="" || $(".number").eq(i).val()==null){
                sum = sum + total;
            }else{
                sum = sum + parseInt($(".number").eq(i).val());
            }
        }
        $("#sum").text(sum);
    });

    $("#unitPrice").on('input',function(e){
        var unitPrice = $("#unitPrice").val();
        var sum = $("#sum").text();
        var totalPrice = sum*unitPrice;
        $("#totalPrice").text(totalPrice);
        var type = $("input[name=number]").length;
        var number=0;
        for(var i=0;i<type;i++){
            number = $("input[name='number']").eq(i).val();
            if(number<0){
                $("#unitPrice").val('');
                numberTip.innerHTML='数量不能填负数';
                return false;
            }else{
                numberTip.innerHTML='';
            }
        }
        var unitPrice = $("#unitPrice").val();
        var sum = $("#sum").text();
        var totalPrice = sum*unitPrice;
        $("#totalPrice").text(totalPrice);
    });


    $(function(){
        var flag = true;
        $(".danxuan_radio ul li label").click(function(event) {
            var ind = $(this).parent("li").index();
            $(".zd_numtable").eq(ind).show().siblings('.zd_numtable').hide();
            //改变表格的数据和td
            $(".zd_numtable").find("table tr td").text()
            $(this).find('img').attr("src","${baseurl}statics/assets/images/check.png");
            $(this).parents("li").siblings('li').find('label img').attr("src","${baseurl}statics/assets/images/check01.png");
            $("#totalPrice").text(0);
            $("#unitPrice").val('');
            var shoesType = $(this).siblings("input").val();

            var model = $("select[name=model] option:selected").val();
            if(model==null){
                model = 1;
            }

            $.ajax({
                url: "${baseurl}shoesSize/findShoesSize",
                data:{"shoesType":shoesType,"model":model},
                type: "post",
                success: function (json) {
                    console.log(json);
                    var td1 ='';
                    var td2 ='';
                    for(var i=0;i<json.length;i++){
                        td1 += '<td><input type="text" readonly="readonly" name="size" style="width: 50px" value="'+json[i]+'"></td>';
                        td2 += '<td><input type="text" class="number" name="number" style="width: 50px"></td>';
                    }
                    var table = '<table><tr>'+td1+'<td>合计</td></tr><tr>'+td2+'<td id="sum"></td></tr></table><span class="tips" id="numberTip"></span>';
                    $("#sizeTable").html("");
                    $("#sizeTable").html(table);
                },
                error: function (json) {
                    alert("error");
                }
            });
        });



        $(".zhongdi_type span").click(function(e) {
            //alert($(this).siblings('ul'))
            $(this).parents("li").siblings("li").find('.zhongdi_type ul').slideUp(200);

            $(this).siblings('ul').slideToggle(200);
            $(this).siblings('ul').find('li').click(function(event) {
                $(this).parents("ul").siblings('span').text($(this).text());
                $(this).parent("ul").slideUp(200);
            });

            $(document).one("click", function(){
                $(".zhongdi_type ul").slideUp(500);

            });
            e.stopPropagation();
        });

        $(".zhongdi_type span,.zhongdi_type ul").on("click", function(e){
            e.stopPropagation();
        });
    })

    jQuery(function ($) {
//        var oTable1 = $('#sample-table-2').dataTable({
//            "aoColumns": [
//                {"bSortable": false},
//                null, null, null, null, null,
//                {"bSortable": false}
//            ]
//        });


        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();
            var off2 = $source.offset();
            var w2 = $source.width();
            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }
    })
</script>
</body>
</html>

